<jsp:useBean id="movieDetailData" scope="request" type="work.comeback.omo.model.movie.detail.MovieDetailData"/>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%--<%@ page import="work.comeback.model.movie.detail.MovieDetailData" %>--%>
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Player</title>
    <link href="<c:url value="/assets/css/video-js.min.css"/>" rel="stylesheet"/>
    <script src="<c:url value="/assets/js/video.min.js"/>"></script>
    <link href="<c:url value="/assets/css/tailwind.output.css"/>" rel="stylesheet" type="text/css"/>
</head>
<body class="min-h-screen bg-base-300">
<!-- Navigation -->
<jsp:include page="/include/web_header.jsp"/>

<!-- Main Content -->
<div class="container mx-auto p-4">
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-4">
        <!-- Video Player Section -->
        <div class="lg:col-span-3">
            <div class="bg-base-200 rounded-lg">
                <!-- Video Title -->
                <div class="p-4 text-xl font-bold">
                    ${movieDetailData.vodName} 第<c:out value="${param.episode}" default="1"/>集
                </div>
                <!-- Video Player -->
                <div class="aspect-video bg-black relative">
                    <c:url var="defaultPoster" value="/assets/img/play.png"/>
                    <video id="video-player" class="video-js w-full h-full absolute inset-0" controls
                           poster="${not empty movieDetailData.vodPicThumb ? movieDetailData.vodPicThumb : defaultPoster}"
                           crossorigin="anonymous" playsinline
                           data-setup='{"playbackRates": [0.5, 1.0, 1.5, 1.75, 2.0, 2.5, 3.0]}'>
                        <source src="${movieDetailDataPlayUrls[movieDetailData.vodRemarks]}"
                                type="application/x-mpegURL">
                        <p class="vjs-no-js">
                            To view this video please enable JavaScript, and consider upgrading to a
                            web browser that
                            <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                        </p>
                    </video>
                </div>
                <!-- Video Controls -->
                <div class="p-4 flex flex-wrap gap-2">
                    <button class="btn btn-primary" onclick="playVideo()">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                             stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        播放
                    </button>
                    <button class="btn btn-ghost">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                             stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                        </svg>
                        收藏
                    </button>
                </div>
            </div>

            <!-- Video Info -->
            <div class="mt-4 bg-base-200 rounded-lg p-4">
                <div class="stats shadow w-full">
                    <div class="stat">
                        <div class="stat-title">评分</div>
                        <div class="stat-value">${movieDetailData.vodDoubanScore}</div>
                    </div>
                    <div class="stat">
                        <div class="stat-title">时长</div>
                        <div class="stat-value text-lg sm:text-2xl">${movieDetailData.vodDuration}</div>
                    </div>
                    <div class="stat">
                        <div class="stat-title">更新至</div>
                        <div class="stat-value">${movieDetailData.vodTotal}集</div>
                    </div>
                </div>

                <div class="divider"></div>

                <div class="prose max-w-none">
                    <h2>剧情简介：</h2>
                    <p>${movieDetailData.vodBlurb}</p>
                </div>

                <!-- 猜你喜欢 Section -->
                <div class="mt-8">
                    <h2 class="text-2xl font-bold mb-4">猜你喜欢</h2>
                    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
                        <!-- Recommended Item 1 -->
                        <c:forEach items="${recommendations}" var="recommendation">
                            <div class="card bg-base-100 shadow-xl">
                                <figure class="relative pt-[56.25%]">
                                    <img src="${recommendation.vodPic}" alt="${recommendation.vodName}"
                                         class="absolute inset-0 w-full h-full object-cover"/>
                                </figure>
                                <div class="card-body p-2">
                                    <h3 class="card-title text-sm">${recommendation.vodName}</h3>
                                    <p class="text-xs text-gray-400">更新至${recommendation.vodTotal}集</p>
                                </div>
                            </div>
                        </c:forEach>
                    </div>
                </div>
            </div>
        </div>

        <div class="lg:col-span-1">
            <div class="bg-base-200 rounded-lg p-4 sticky top-4">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-bold">oMo播放器</h3>
                    <span class="text-sm">1-10</span>
                </div>
                <div class="grid grid-cols-5 gap-2">
                    <button class="btn btn-sm">1</button>
                    <button class="btn btn-sm">2</button>
                    <button class="btn btn-sm">3</button>
                    <button class="btn btn-sm">4</button>
                    <button class="btn btn-sm">5</button>
                    <button class="btn btn-sm">6</button>
                    <button class="btn btn-sm btn-primary">7</button>
                    <button class="btn btn-sm">8</button>
                    <button class="btn btn-sm">9</button>
                    <button class="btn btn-sm">10</button>
                </div>
            </div>
        </div>

        <!-- Episode List -->
<%--        <div class="lg:col-span-1">--%>
<%--            <div class="bg-base-200 rounded-lg p-4 sticky top-4">--%>
<%--                <div class="flex justify-between items-center mb-4">--%>
<%--                    <h3 class="text-lg font-bold">oMo 播放器</h3>--%>
<%--                    <span class="text-sm">1-${movieDetailData.vodTotal}</span>--%>
<%--                </div>--%>
<%--                <div class="grid grid-cols-5 gap-2">--%>
<%--                    <c:forEach begin="1" end="${movieDetailDataPlayUrls[movieDetailData.vodRemarks]}" var="episode">--%>
<%--                        <button class="btn btn-sm ${param.episode == episode ? 'btn-primary' : ''}">--%>
<%--                                &lt;%&ndash;                                onclick="location.href='${ctx}/api/movie/detail?movieId=${movieDetailData.vodId}&episode=${episode}'">&ndash;%&gt;--%>
<%--                                &lt;%&ndash;                                ${episode}&ndash;%&gt;--%>
<%--                        </button>--%>
<%--                    </c:forEach>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--        </div>--%>
    </div>
</div>

<!-- Footer -->
<jsp:include page="/include/footer_bar.jsp"/>
<jsp:include page="/include/hover_theme_controller.jsp"/>
</body>
</html>


<%--<%@ page contentType="text/html;charset=UTF-8" language="java" %>--%>
<%--<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>--%>
<%--<%@ page import="work.comeback.model.movie.detail.MovieDetailData" %>--%>
<%--<%@ page import="java.util.List" %>--%>
<%--<%@ page import="work.comeback.service.MovieService" %>--%>
<%--<%@ page import="work.comeback.service.imp.MovieServiceImpl" %>--%>
<%--<%@ page import="work.comeback.dao.movie.IMovieDetail" %>--%>

<%--<!DOCTYPE html>--%>
<%--<html lang="en" data-theme="dark">--%>
<%--<head>--%>
<%--    <meta charset="UTF-8">--%>
<%--    <meta name="viewport" content="width=device-width, initial-scale=1.0">--%>
<%--    <title>Video Player</title>--%>
<%--    <link href="<c:url value="/assets/css/video-js.min.css"/>" rel="stylesheet"/>--%>
<%--    <script src="<c:url value="/assets/js/video.min.js"/>"></script>--%>
<%--    <link href="<c:url value="/assets/css/output.css"/>" rel="stylesheet" type="text/css"/>--%>
<%--</head>--%>
<%--<body class="min-h-screen bg-base-300">--%>
<%--<!-- Navigation -->--%>
<%--<nav class="navbar bg-base-200">--%>
<%--    <div class="flex-1">--%>
<%--        <a class="btn btn-ghost text-xl">${applicationScope.appTitle}</a>--%>
<%--    </div>--%>
<%--    <div class="flex-none gap-2">--%>
<%--        <div class="form-control">--%>
<%--            <input type="text" placeholder="Search" class="input input-bordered w-24 md:w-auto"/>--%>
<%--        </div>--%>
<%--        <button class="btn btn-ghost btn-circle">--%>
<%--            <div class="indicator">--%>
<%--                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"--%>
<%--                     stroke="currentColor">--%>
<%--                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"--%>
<%--                          d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>--%>
<%--                </svg>--%>
<%--                <span class="badge badge-xs badge-primary indicator-item"></span>--%>
<%--            </div>--%>
<%--        </button>--%>
<%--    </div>--%>
<%--</nav>--%>

<%--<!-- Main Content -->--%>
<%--<div class="container mx-auto p-4">--%>
<%--    <div class="grid grid-cols-1 lg:grid-cols-4 gap-4">--%>
<%--        <!-- Video Player Section -->--%>
<%--        <div class="lg:col-span-3">--%>
<%--            <div class="bg-base-200 rounded-lg">--%>
<%--                <!-- Video Title -->--%>
<%--                <div class="p-4 text-xl font-bold">--%>
<%--                    ${movieDetail.vodName} 第7集--%>
<%--                </div>--%>
<%--                <!-- Video Player -->--%>
<%--                <div class="aspect-video bg-black relative">--%>
<%--                    <div class="absolute inset-0 flex items-center justify-center">--%>
<%--                        <span class="loading loading-spinner loading-lg"></span>--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--                <!-- Video Controls -->--%>
<%--                <div class="p-4 flex flex-wrap gap-2">--%>
<%--                    <button class="btn btn-primary">--%>
<%--                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"--%>
<%--                             stroke="currentColor">--%>
<%--                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"--%>
<%--                                  d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>--%>
<%--                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"--%>
<%--                                  d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>--%>
<%--                        </svg>--%>
<%--                        播放--%>
<%--                    </button>--%>
<%--                    <button class="btn btn-ghost">--%>
<%--                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"--%>
<%--                             stroke="currentColor">--%>
<%--                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"--%>
<%--                                  d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>--%>
<%--                        </svg>--%>
<%--                        收藏--%>
<%--                    </button>--%>
<%--                </div>--%>
<%--            </div>--%>

<%--            <!-- Video Info -->--%>
<%--            <div class="mt-4 bg-base-200 rounded-lg p-4">--%>
<%--                <div class="stats shadow w-full">--%>
<%--                    <div class="stat">--%>
<%--                        <div class="stat-title">评分</div>--%>
<%--                        <div class="stat-value">3.2</div>--%>
<%--                    </div>--%>
<%--                    <div class="stat">--%>
<%--                        <div class="stat-title">时长</div>--%>
<%--                        <div class="stat-value text-lg sm:text-2xl">26分12秒</div>--%>
<%--                    </div>--%>
<%--                    <div class="stat">--%>
<%--                        <div class="stat-title">更新至</div>--%>
<%--                        <div class="stat-value">10集</div>--%>
<%--                    </div>--%>
<%--                </div>--%>

<%--                <div class="divider"></div>--%>

<%--                <div class="prose max-w-none">--%>
<%--                    <h2>剧情简介：</h2>--%>
<%--                    <p>--%>
<%--                        世上谁人不死？任你风华绝代，抱恨黄土下；任你一代天骄，生前万里山山，到头来也终将化作一捧黄土。故事要讲述第被皇家云长绝杀后，通过一场入人心的阴谋，最终成为一个长生不死的存在。这是一条看不了尽头的道路，路强之上自由和执着，等待着他的将会是一直深不见底的深渊，战胜欲。热血沸腾的战斗，察觉与成型的阴谋，满是谜题寻找生存的迷宫，通过这样长生不死的旅途，通俗的讲个不老的封神之路。</p>--%>
<%--                </div>--%>

<%--                <!-- 猜你喜欢 Section -->--%>
<%--                <div class="mt-8">--%>
<%--                    <h2 class="text-2xl font-bold mb-4">猜你喜欢</h2>--%>
<%--                    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">--%>
<%--                        <!-- Recommended Item 1 -->--%>
<%--                        <div class="card bg-base-100 shadow-xl">--%>
<%--                            <figure class="relative pt-[56.25%]">--%>
<%--                                <img src="/placeholder.svg" alt="封神演义"--%>
<%--                                     class="absolute inset-0 w-full h-full object-cover"/>--%>
<%--                            </figure>--%>
<%--                            <div class="card-body p-2">--%>
<%--                                <h3 class="card-title text-sm">封神演义</h3>--%>
<%--                                <p class="text-xs text-gray-400">更新至12集</p>--%>
<%--                            </div>--%>
<%--                        </div>--%>
<%--                        <!-- Recommended Item 2 -->--%>
<%--                        <div class="card bg-base-100 shadow-xl">--%>
<%--                            <figure class="relative pt-[56.25%]">--%>
<%--                                <img src="/placeholder.svg" alt="斗破苍穹"--%>
<%--                                     class="absolute inset-0 w-full h-full object-cover"/>--%>
<%--                            </figure>--%>
<%--                            <div class="card-body p-2">--%>
<%--                                <h3 class="card-title text-sm">斗破苍穹</h3>--%>
<%--                                <p class="text-xs text-gray-400">更新至24集</p>--%>
<%--                            </div>--%>
<%--                        </div>--%>
<%--                        <!-- Recommended Item 3 -->--%>
<%--                        <div class="card bg-base-100 shadow-xl">--%>
<%--                            <figure class="relative pt-[56.25%]">--%>
<%--                                <img src="/placeholder.svg" alt="武动乾坤"--%>
<%--                                     class="absolute inset-0 w-full h-full object-cover"/>--%>
<%--                            </figure>--%>
<%--                            <div class="card-body p-2">--%>
<%--                                <h3 class="card-title text-sm">武动乾坤</h3>--%>
<%--                                <p class="text-xs text-gray-400">更新至18集</p>--%>
<%--                            </div>--%>
<%--                        </div>--%>
<%--                        <!-- Recommended Item 4 -->--%>
<%--                        <div class="card bg-base-100 shadow-xl">--%>
<%--                            <figure class="relative pt-[56.25%]">--%>
<%--                                <img src="/placeholder.svg" alt="完美世界"--%>
<%--                                     class="absolute inset-0 w-full h-full object-cover"/>--%>
<%--                            </figure>--%>
<%--                            <div class="card-body p-2">--%>
<%--                                <h3 class="card-title text-sm">完美世界</h3>--%>
<%--                                <p class="text-xs text-gray-400">更新至30集</p>--%>
<%--                            </div>--%>
<%--                        </div>--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--        </div>--%>

<!-- Episode List -->
<%--        <div class="lg:col-span-1">--%>
<%--            <div class="bg-base-200 rounded-lg p-4 sticky top-4">--%>
<%--                <div class="flex justify-between items-center mb-4">--%>
<%--                    <h3 class="text-lg font-bold">金牌影院播放器</h3>--%>
<%--                    <span class="text-sm">1-10</span>--%>
<%--                </div>--%>
<%--                <div class="grid grid-cols-5 gap-2">--%>
<%--                    <button class="btn btn-sm">1</button>--%>
<%--                    <button class="btn btn-sm">2</button>--%>
<%--                    <button class="btn btn-sm">3</button>--%>
<%--                    <button class="btn btn-sm">4</button>--%>
<%--                    <button class="btn btn-sm">5</button>--%>
<%--                    <button class="btn btn-sm">6</button>--%>
<%--                    <button class="btn btn-sm btn-primary">7</button>--%>
<%--                    <button class="btn btn-sm">8</button>--%>
<%--                    <button class="btn btn-sm">9</button>--%>
<%--                    <button class="btn btn-sm">10</button>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--        </div>--%>
<%--    </div>--%>
<%--</div>--%>
<%--</body>--%>
<%--</html>--%>

<%--<!DOCTYPE html>--%>
<%--<html lang="en" data-theme="light">--%>
<%--<head>--%>
<%--    <meta charset="UTF-8" />--%>
<%--    <meta name="viewport" content="width=device-width, initial-scale=1.0" />--%>
<%--    <title>Movie Details</title>--%>
<%--    <link href="<c:url value="/assets/css/output.css"/>" rel="stylesheet" type="text/css" />--%>
<%--</head>--%>
<%--<body class="bg-base-200">--%>
<%--<div class="navbar bg-base-100 shadow-lg">--%>


<%--    <div class="flex-1">--%>
<%--        <a class="btn btn-ghost normal-case text-xl">${param.movieId}</a>--%>
<%--    </div>--%>
<%--    <div class="flex-none">--%>
<%--        <button class="btn btn-square btn-ghost">--%>
<%--            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current">--%>
<%--                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>--%>
<%--            </svg>--%>
<%--        </button>--%>
<%--    </div>--%>
<%--</div>--%>

<%--<div class="container mx-auto p-4">--%>
<%--    <div class="card lg:card-side bg-base-100 shadow-xl">--%>
<%--        <figure>--%>
<%--            <img src="${pageScope.movieDetail.vodPic}" alt="Movie Poster" class="w-full lg:w-64 object-cover" />--%>
<%--        </figure>--%>
<%--        <div class="card-body">--%>
<%--            <h2 class="card-title text-3xl">${pageScope.movieDetail.vodName}</h2>--%>
<%--            <div class="flex items-center mb-2">--%>
<%--                <div class="rating rating-sm">--%>
<%--                    <input type="radio" name="rating-6" class="mask mask-star-2 bg-orange-400" checked />--%>
<%--                    <input type="radio" name="rating-6" class="mask mask-star-2 bg-orange-400" checked />--%>
<%--                    <input type="radio" name="rating-6" class="mask mask-star-2 bg-orange-400" checked />--%>
<%--                    <input type="radio" name="rating-6" class="mask mask-star-2 bg-orange-400" checked />--%>
<%--                    <input type="radio" name="rating-6" class="mask mask-star-2 bg-orange-400" />--%>
<%--                </div>--%>
<%--                <span class="ml-2 text-sm">8.8/10</span>--%>
<%--            </div>--%>
<%--            <p class="text-sm mb-4">2010 | 2h 28min | Action, Adventure, Sci-Fi</p>--%>
<%--            <p>--%>
<%--                A thief who steals corporate secrets through the use of dream-sharing technology is given the inverse task--%>
<%--                of planting an idea into the mind of a C.E.O.--%>
<%--            </p>--%>
<%--            <div class="card-actions justify-end mt-4">--%>
<%--                <button class="btn btn-primary">Watch Trailer</button>--%>
<%--            </div>--%>
<%--        </div>--%>
<%--    </div>--%>

<%--    <div class="mt-8">--%>
<%--        <h3 class="text-2xl font-bold mb-4">Cast</h3>--%>
<%--        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">--%>
<%--            <div class="card bg-base-100 shadow-xl">--%>
<%--                <figure>--%>
<%--&lt;%&ndash;                    <img src="${pageScope.movieDetail}" alt="Actor 1" class="w-full h-48 object-cover" />&ndash;%&gt;--%>
<%--                </figure>--%>
<%--                <div class="card-body p-4">--%>
<%--&lt;%&ndash;                    <h4 class="card-title text-lg">${pageScope.movieDetail.actors.get(0).name}</h4>&ndash;%&gt;--%>
<%--&lt;%&ndash;                    <p class="text-sm">as ${pageScope.movieDetail.actors.get(0).character}</p>&ndash;%&gt;--%>
<%--                </div>--%>
<%--            </div>--%>
<%--            <!-- Additional actors here -->--%>
<%--        </div>--%>
<%--    </div>--%>
<%--</div>--%>
<%--</body>--%>
<%--</html>--%>
